<template>
  <van-tabbar v-model="active" route replace>
    <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/user">个人中心</van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      tabbers: [], // tabbar
    };
  },
  created() {
    this.getTabbars()
  },
  methods: {
    // 获取路由tabbar
    getTabbars() {
      const { options: {routes} } = this.$router
      const tabbers = routes.filter(item => item.meta?.tabbar)
      this.tabbers = tabbers || []
    }
  },
}
</script>

<style lang="scss" scoped>
// 电脑大屏溢出
.van-tabbar--fixed {
  max-width: var(--maxWidth);
  left: unset;
}
</style>